<template>
	<div v-show="loadingShow">
		<loading></loading>
	</div>
	<div v-else>
		<div class="card-details-box">
			<div class="card-details-info">
				<p class="card-details-info1 clearfix">
					<span class="fl info1-span1">{{cardInfo.cardTemplateName}}</span>
					<span class="fr info1-span2">{{cardInfo.cardNo}}</span>
				</p>
				<p class="card-details-info2 clearfix">
					<span class="fl info2-span1">*仅限{{cardInfo.provName}}门店使用</span>
					<span class="fr info2-span2">
						有效期：<b>{{cardInfo.stratDateFor}}~{{cardInfo.endDateFor}}</b>
					</span>
				</p>
			</div>
			<div class="card-details-item">
				<p class="card-details-item1">
					<span class="item1-title">服务项目</span>
					<a v-link="{path: '/useexplain'}" class="item1-rule fr">
						<span>使用规则</span>&nbsp;<span class="iconfont icon-arrows"></span>
					</a>
				</p>
				<ul class="card-details-ul">
					<li v-for="item in cardLmitSever">
						<span class="card-details-circle"></span>
						<span class="ul-con">{{item.serviceName}}</span>
						<span class="ul-total">（共{{item.totalTimes}}次）</span>
						<span class="ul-num fr">剩余{{item.remainServiceTimes}}次</span>
					</li>
					<li v-for="item in cardInfiniteSever">
						<span class="card-details-circle"></span>
						<span class="ul-con">{{item.serviceName}}（共{{item.totalTimes}}次）</span>
						<span class="ul-num fr">剩余{{item.remainServiceTimes}}次</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="card-details-btn" v-bind:class="{'btn-clock':!btnType}">
			<div v-if="btnType">
				<a ca="P我的卡详情_选择用卡服务" @click="confirm">用卡下单</a>
			</div>
			<div v-else>
				<a href="javascript:;">{{btnText}}</a>
			</div>
		</div>
	</div>
</template>

<script type="text/javascript">
		import common from '../../utils/common.js';
		import loading from '../common/loading';
		export default{
			data () {
				return {
					itemData:'',
					cardData:'',
					cardCodes:'',
					cardInfo:{},
					cardLmitSever:[],//限制次数
					cardInfiniteSever:[],//不限次数
					btnType:true, //判断按钮是否置灰
					btnText:'用卡下单',
					cardServer:'',
					loadingShow:true
				}
			},
			components: {
				loading
			},
			methods:{
				confirm:function(){
					if(this.cardServer.hasOwnProperty('flagNo')){
						if(this.cardServer.flagNo !== undefined && this.cardServer.flagNo == false){
							common.Toast('该卡仅限「'+this.cardInfo.provName+'」区域使用请切换城市使用');
							this.btnType = false;
							sessionStorage.btnType = false;
							//this.btnText = '当前城市不可用';
						}
					}else{
						this.$router.go({name : 'cardselect' , params: { cardCode:this.cardCodes, cardTemplateNo:this.cardData.cardTemplateNo} });
					}
					//v-link="{name:'cardselect', params: { cardCode:cardCodes, cardTemplateNo:cardData.cardTemplateNo}}"
				}
			},
			events: {
				cardDetailsData: function ( cardData,cardCode,cardServer) {

					if(sessionStorage.btnType == 'false'){
						this.$set('btnType',false);
					}
					
					var stratDate,endDate,stratDateFormate, endDateFormate, cardInfo = cardData;
					this.cardCodes = cardCode;
					this.cardData = cardData;
					this.cardServer = cardServer;
					stratDate = new Date(cardData.startDate);//格式化使用期限
					endDate = new Date(cardData.endDate);//格式化使用期限

					cardInfo.stratDateFor = stratDate.getFullYear() + '.' + (stratDate.getMonth()+1 < 10 ? '0'+(stratDate.getMonth()+1) : stratDate.getMonth()+1) + '.' + stratDate.getDate();

					cardInfo.endDateFor = endDate.getFullYear() + '.' + (endDate.getMonth()+1 < 10 ? '0'+(endDate.getMonth()+1) : endDate.getMonth()+1) + '.' + endDate.getDate();
					
					for(var i = 0; i < cardServer.cardItemVo.length; i++){

						if(cardServer.cardItemVo[i].isCanOnlineOpenOrder){
							//不限次数
							this.cardLmitSever.push(cardServer.cardItemVo[i]);
						}else{
							//限制次数
							this.cardInfiniteSever.push(cardServer.cardItemVo[i]);
						}

					}
					this.cardInfo = cardInfo;
					this.loadingShow = false;
					localStorage.thisCardData = JSON.stringify(cardData);
					localStorage.thisCardServer = JSON.stringify(cardServer);
					localStorage.thisCardRules = cardData.cardRules;

					
					//判断去下单按钮是否置灰
					if(this.cardLmitSever.length < 1){
						this.btnType = false;
					}
				}
			}
		}
</script>

<style lang="scss">
 
	@import '../../assets/css/_functions.scss';
	@import '../../assets/css/_variables.scss';

	
	.card-details-box {
		margin: rem(16) rem(10) rem(55) rem(10);
		padding: 0 rem(10);
		background-color: #fff;
		border-radius: rem(8);
	}
	.card-details-info1 {
		height: rem(50);
	}
	.info1-span1 {
		font-size: rem(18);
		width: 20rem;
	    height: 5rem;
	    overflow: hidden;
	    word-break: break-word;
	}
	.info1-span2 {
		font-size: rem(13);
		color: #999;
	}
	.card-details-info2 {
		height: rem(40);
		line-height: rem(40);
		border-bottom: 1px dashed #dedede;
		font-size: rem(12);
		color: #999;
		position: relative;
	}

	b  {
		font-weight: 100!important;
	}
	.card-details-item1 {
		height: rem(50);
		line-height: rem(50);
		border-bottom: 1px solid #dedede;
	}
	.item1-title {
		font-size: rem(14);
		color:#1f323e;
	 }
	 .item1-rule {
		font-size: rem(13);
		color:#afafaf;
		.icon-arrows{
			color:#cdcdcd;
			vertical-align: middle;
		}
		span{
			vertical-align: middle;
			color:#1f323e;
		}
	 }
	 .card-details-ul {
	 	width: 100%;
	 	height: auto;
	 	overflow: hidden;
	 }
	 .card-details-ul li {
	 	height: rem(50);
		line-height: rem(50);
		border-bottom: 1px solid #dedede;
		font-size: rem(13);
	 }
	 .card-details-ul li:last-child{
	 	border-bottom:0;
	 }
	 .card-details-circle {
	 	display: inline-block;
	 	background:#8392a0;
		width:10px;
		height:10px;
		border-radius:100%;
		vertical-align:middle;
	 }
	.ul-con {
		max-width:rem(140);
		text-overflow: ellipsis;
		overflow:hidden;
		display:inline-block;
		color: #8392a0;
		vertical-align: middle;
		white-space: nowrap;
	}
	.ul-total{
		color: #8392a0;
		display:inline-block;
		vertical-align: middle;
	}
	.ul-num {
		color: #8392a0;
	}
	.card-details-btn {
		background-color: #ff6600;
		width:100%;
		height: rem(48);
		line-height: rem(48);
		font-size: rem(18);
		text-align: center;
		position:fixed;
		bottom:0;
		left:0;
	}
	.card-details-btn a {
		display: block;
		color: #fff;
	}
	.btn-clock{
		background-color:#9e9e9e;
	}
	.sf-tips{
		display: inline-block;
    	vertical-align: middle;
    	margin-right:rem(3)
	}
</style>